import { FC } from "react"
import { ITodo } from "../data"
import { Button } from 'antd'
import style from './index.less'
interface IItemProps {
  todo: ITodo
  removeTodo: (id: number) => void,
  toggleTodo: (id: number) => void
}

const Item: FC<IItemProps> = ({ todo, removeTodo, toggleTodo }) => {
  const { value, completed, id } = todo
  return (
    <div className={style.item}>
      <div>{value}</div>
      <input type='checkbox' checked={completed} onChange={() => { toggleTodo(id) }} ></input>
      <Button type="primary" onClick={() => { removeTodo(id) }}>dele</Button>
    </div>)
}

export default Item